<template>
    <div class="home_section">
        <section class="banner_section">
            <div class="w">
                <!-- 轮播 -->
                    <el-carousel :loop="true" trigger="click" :interval="3000" :initial-index="2" pause-on-hover height="450px">
                        <el-carousel-item v-for="(item,index) in BannerImgs" :key="item.carousel_id">
                            <img :src="`http://101.132.181.9/api/${item.imgPath}`">
                        </el-carousel-item>
                    </el-carousel>
            </div>
        </section>
            <div class="top">
                <div class="w clearfix">
                    <span class="big">手机</span>
                </div>
            </div>
            <CateList :data="phoneList"></CateList>
             <div class="top">
                <div class="w clearfix">
                    <span class="big fl">家电</span>
                    <ol class="clearfix fr">
                        <li :class="{'licheck':!hotFlag}" @mouseover="changeTab('hot')">热门</li>
                        <li :class="{'licheck':hotFlag}" @mouseover="changeTab('tv')">电视影音</li>
                    </ol>
                </div>
            </div>
            <div class="posi">
                <CateList v-if="!hotFlag" :data="HotTVList">
                    <template #left>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png" alt="">
                        </div>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png" alt="">
                        </div>
                    </template>
                </CateList>             
                <CateList v-if="hotFlag" :data="TVList">
                    <template #left>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png" alt="">
                        </div>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png" alt="">
                        </div>
                    </template>
                </CateList>
            </div>
            <div class="top">
                <div class="w clearfix">
                    <span class="big fl">配件</span>
                    <ol class="clearfix fr">
                        <li :class="{'licheck':hotFlag2 == 1}" @mouseover="changeTab2('hot')">热门</li>
                        <li :class="{'licheck':hotFlag2 == 2}" @mouseover="changeTab2('sec')">保护套</li>
                        <li :class="{'licheck':hotFlag2 == 3}" @mouseover="changeTab2('sth')">充电器</li>
                    </ol>
                </div>
            </div>
            <div class="posi">
                <CateList v-if="hotFlag2 == 1" :data="HotFitList">
                    <template #left>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png" alt="">
                        </div>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png" alt="">
                        </div>
                    </template>
                </CateList>
                <CateList v-if="hotFlag2 == 2" :data="PhoneCaseList">
                    <template #left>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png" alt="">
                        </div>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png" alt="">
                        </div>
                    </template>
                </CateList>
                <CateList v-if="hotFlag2 == 3" :data="ChargerList">
                    <template #left>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png" alt="">
                        </div>
                        <div class="aa">
                             <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png" alt="">
                        </div>
                    </template>
                </CateList>
            </div>
        <!-- </section> -->
    </div>
</template>
<script setup>
import CateList from '@/components/CateList.vue'
import { ref,reactive ,onMounted } from 'vue'
import { getBannerList,getPhoneList,getElectricalList } from '@/utils/home.js'
const BannerImgs = ref([]);
const getBanner = async ()=>{
    let data = await getBannerList();
    // console.log(data);
    BannerImgs.value = data.carousel;
}
const phoneList = reactive({
    title:'手机',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getPhone = async ()=>{
    var obj = {categoryName:'手机'}
    let data = await getPhoneList(obj);
    console.log(data);
    phoneList.data = data.Product;
}
const hotFlag = ref(false);
const hotFlag2 = ref('1');
const TVList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getTv = async ()=>{
    var obj = {categoryName:'电视机'}
    let data = await getPhoneList(obj);
    console.log(data);
    TVList.data = data.Product;
}
// electrical

const HotTVList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getelectrical = async ()=>{
    var obj = {categoryName:['电视机','空调','洗衣机']};
    var data = await getElectricalList(obj);
    HotTVList.data = data.Product;
    console.log(data,5);
}
const changeTab = (title)=>{
    if(title == 'hot'){
        hotFlag.value = false;
    }else{ 
        hotFlag.value = true;
    }
}

const HotFitList = reactive({
    data:[],
});
const getfittings = async ()=>{
    var obj = {categoryName:['保护套','保护膜','充电器','充电宝']};
    var data = await getElectricalList(obj);
    HotFitList.data = data.Product;
    console.log(data,5);
}
const PhoneCaseList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getPhoneCase = async ()=>{
    let obj = {categoryName:'保护套'}
    let data = await getPhoneList(obj);
    PhoneCaseList.data = data.Product;
}
const ChargerList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getCharger = async ()=>{
    let obj = {categoryName:'充电器'}
    let data = await getPhoneList(obj);
    ChargerList.data = data.Product;
}

const changeTab2 = (title)=>{
    if(title == 'hot'){
        hotFlag2.value = 1;
    }else if(title == 'sec'){
        hotFlag2.value = 2;
    }else{ 
        hotFlag2.value = 3;
    }
}
onMounted(() => {
  getBanner();
  getPhone();
  getTv();
  getelectrical();
  getfittings();
  getPhoneCase();
  getCharger();
})
</script>
<style lang="scss" scoped>
        .banner_section{
            background: #fff;
            border-radius: 0%;
            padding: 20px 0;
            .w{ 
                img{
                    width: 100%;
                }
            }
        }
        .posi{
            position: relative;
            .tab_box{
                position: absolute;
                right: 200px;
                top: 0;
            }
        }
        .top{        
            background: rgb(233, 233, 233);
            height: 60px;
            .big{
                line-height: 60px;
                font-size: 24px;
            }
            ol{
                li{
                    margin: 0 20px;
                    line-height: 50px;
                    font-size: 20px;
                    float: left;
                    border-bottom: 2px solid transparent;
                }
                .licheck{
                    border-bottom: 2px solid red;
                    color: red;
                }
            }
        }
        .aa{
            background: #fff;
            width: 95%;
            height:48%;
            text-align: center;
            color: #777;
            font-size: 24px;
            line-height: 260px;
            margin: 5px;
            margin-top: 6px;
        }
        .aa:hover{
            box-shadow: 0 0 10px #777;
            transform: scale(1.05);
        }
        .aa>span:hover{
            color: orangered;
        }
        .aa>img{
            width: 100%;
            height: 100%;
        }
        .home_section{
            padding-bottom: 20px;
            background: rgb(233, 233, 233);
        }
</style>